@charset "UTF-8";

      
        * {
            margin: 0;
            padding: 0;
            
        }
        html {
            height: 100%;
        }
        body {
            height: 100%;
            background-image: url('../img/login.jpg');
            background-size: cover;
            background-repeat: no-repeat;
        }
      .container {
            height: 100%;
        }
      .login-wrapper {
            background-color: rgba(255, 255, 255, 0.6);
            width: 358px;
            height: 666px;
            border-radius: 15px;
            padding: 0 50px;
            position: relative;
            left: 50%;
            top: 50%;
            transform: translate(-50%, -50%);
            opacity: 0;
            animation: fadeIn 1s ease-in-out forwards;
        }
      .header {
            font-size: 38px;
            font-weight: bold;
            text-align: center;
            line-height: 200px;
            color: #333;
        }
      .input-item {
            display: block;
            width: 100%;
            margin-bottom: 50px;
            border: none;
            padding: 10px;
            font-size: 15px;
            outline: none;
            
            transition: border-color 0.3s ease, box-shadow 0.3s ease;
        }
      .input-item:focus {
            border-color: #FFCC00;
            box-shadow: 0 0 5px #FFCC00;
        }
      .input-item:placeholder {
            text-transform: uppercase;
        }
  
	
     .btn {
    text-align: center;
    padding: 10px;
    width: 100%;
    margin-top: 50px;
    background-color: #1888df;  /* 设置背景颜色为 #1888df */
    color: #fff;
    border: none;
    cursor: pointer;
    transition: all 0.2s ease-in-out;
    border-radius: 10px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
    transform: translateZ(0);
}

      .btn:hover {
            transform: scale(1.05);
            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
        }
      .btn:active {
            animation: buttonPress 0.1s ease-in-out;
        }
        @keyframes buttonPress {
            0% {
                transform: scale(1);
            }
            50% {
                transform: scale(0.95);
            }
            100% {
                transform: scale(1);
            }
        }
      .msg {
            text-align: center;
            line-height: 88px;
            position: relative;
            top: 70px;
        }
       
        @keyframes fadeIn {
            from {
                opacity: 0;
            }
            to {
                opacity: 1;
            }
        }
   